import React, { Component } from 'react';
import Chart from 'react-apexcharts';

export default class LineBoard extends Component {

  constructor(porps) {
    super(porps);
    this.state = {
      options: {
        chart: {
          id: 'line-board',
          height: 380,
          width: "100%"
        },
        xaxis: {
          type: "datetime"
        },
        yaxis: {
          min: this.props.min - 1,
          max: this.props.max + 1
        },
        title: {
          text: this.props.title,
          align: 'left',
          margin: 50,
          floating: false,
          style: {
            fontSize: '14px',
            fontWeight: 'bold',
            fontFamily: undefined,
            color: '#263238'
          },
        },
        annotations: {
          yaxis: [
            {
              y: this.props.max,
              borderColor: '#00E396',
              label: {
                borderColor: '#00E396',
                style: {
                  color: '#fff',
                  background: '#00E396'
                },
                text: 'Max is ' + this.props.max
              }
            },
            {
              y: this.props.min,
              borderColor: '#00E396',
              label: {
                borderColor: '#00E396',
                style: {
                  color: '#fff',
                  background: '#00E396'
                },
                text: 'Min is ' + this.props.min
              }
            },
            {
              y: this.props.avg,
              borderColor: '#00E396',
              label: {
                borderColor: '#00E396',
                style: {
                  color: '#fff',
                  background: '#00E396'
                },
                text: 'Avg is ' + this.props.avg
              }
            },
          ]
        }
      },
      series: [{
        name: 'h2o_feet',
        data: this.props.datas
      }]
    }
  }


  componentDidUpdate(prevProps){
    if(prevProps.datas!==this.props.datas){
        
        const newSeries = [];
        this.state.series.map((s) => {
          const data = this.props.datas
          newSeries.push({ data, name: s.name })
        })
        this.setState({
          series: newSeries
        })
    }
  }
  click = () => {
    const newSeries = [];
    this.state.series.map((s) => {
      const data = this.props.datas
      newSeries.push({ data, name: s.name })
    })
    this.setState({
      series: newSeries
    })
  }


  render() {

    return (
      <div>
        <button onClick={this.click}>dianwo </button>
        <Chart options={this.state.options} series={this.state.series} type="line" width={"100%"} height={320} />
      </div>
    )
  }
}
